<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/shiwu.css" />
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css"/>
		<script type="text/javascript" src="../Resources/flexible.debug.js" ></script>
		<script type="text/javascript" src="../Resources/flexible_css.debug.js" ></script>
		<script type="text/javascript" src="../Resources/jquery.js">
			
		</script>
		<script type="text/javascript" src="../Resources/artTemplate.js" ></script>
		<script type="text/javascript" src="../Resources/jquery-3.2.0.js" ></script>
			
		<script type="text/javascript" src="../Resources/swiper/swiper-3.4.2.jquery.min.js">
		</script>
		<script src="../Resources/js.js"></script>
	</head>
	<body>
		<header class="head">
			<p>帅吧</p>
		</header>
		
		
	
		
		
		
<!--		
	<style type="text/css">
		#tabs-container{
	height:400px;
}

/*.news-list{
	padding:0 10px;
}
.news-list li{
	overflow: hidden;
border-bottom: 1px solid #eceef0;
box-shadow: 0 1px 1px #fff;
font-weight: normal;
height: 35px;
line-height: 35px;
font-size: 1.125em;
}*/

	</style>	
		-->
		
		<div class="swiper-container a">
			    <div class="swiper-wrapper">
			        <div class="swiper-slide">
			        	<div class="tabs">
						<a href="#" class="active">最热</a>
						<a href="#" >型男改造</a>
						<a href="#">搭配</a>
						<a href="#">发型</a>
						<a href="#">潮流</a>
						<a href="#">护理</a>
		                </div>
			        </div>
			        
			    </div>
			    <!-- 如果需要分页器 -->
			    <!--<div class="swiper-pagination"></div>-->
			    
			    <!-- 如果需要导航按钮 -->
			    <!--<div class="swiper-button-prev"></div>-->
			    <!--<div class="swiper-button-next"></div>-->
			    
			    <!-- 如果需要滚动条 -->
			    <div class="swiper-scrollbar"></div>
		</div>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
  <div id="tabs-container" class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="content-slide">
        <ul class="news-list">
       <li>
       	<img src="imgs/images/nan_04.png" />
       </li>
        </ul>
        <main class="ss">
        	<dl>
        	<dt><img src="imgs/images/nan_07.png" /></dt>
        	<dd>杜蕾斯</dd>
        </dl>
        <dl>
        	<dt><img src="imgs/images/nan_10.png" /></dt>
        	<dd>4639</dd>
        </dl>
        </main>
        <main class="s">
        	<img src="imgs/images/an_03.png" />
        </main>
       
        <!--<div class="aihao">
			<ul class="twtw">
				
			</ul>
	    </div>-->
        
        </div>
      </div>
      <div class="swiper-slide">
        <div class="content-slide">
          <ul class="news-list">
       <li>
       	<img src="imgs/images/nan_04.png" />
       </li>
        </ul>
        <main class="ss">
        	<dl>
        	<dt><img src="imgs/images/nan_07.png" /></dt>
        	<dd>杜蕾斯</dd>
        </dl>
        <dl>
        	<dt><img src="imgs/images/nan_10.png" /></dt>
        	<dd>4639</dd>
        </dl>
        </main>
        <main class="s">
        	<img src="imgs/images/an_03.png" />
        </main>
       
        <!--<div class="aihao">
			<ul class="twtw">
				
			</ul>
	    </div>-->
        
        </div>
      </div>
      <div class="swiper-slide">
        <div class="content-slide">  <ul class="news-list">
       <li>
       	<img src="imgs/images/nan_04.png" />
       </li>
        </ul>
        <main class="ss">
        	<dl>
        	<dt><img src="imgs/images/nan_07.png" /></dt>
        	<dd>杜蕾斯</dd>
        </dl>
        <dl>
        	<dt><img src="imgs/images/nan_10.png" /></dt>
        	<dd>4639</dd>
        </dl>
        </main>
        <main class="s">
        	<img src="imgs/images/an_03.png" />
        </main>
       
        <!--<div class="aihao">
			<ul class="twtw">
				
			</ul>
	    </div>-->
        
        </div>
      </div>
       <div class="swiper-slide">
        <div class="content-slide">  <ul class="news-list">
       <li>
       	<img src="imgs/images/nan_04.png" />
       </li>
        </ul>
        <main class="ss">
        	<dl>
        	<dt><img src="imgs/images/nan_07.png" /></dt>
        	<dd>杜蕾斯</dd>
        </dl>
        <dl>
        	<dt><img src="imgs/images/nan_10.png" /></dt>
        	<dd>4639</dd>
        </dl>
        </main>
        <main class="s">
        	<img src="imgs/images/an_03.png" />
        </main>
       
        <!--<div class="aihao">
			<ul class="twtw">
				
			</ul>
	    </div>-->
        
        </div>
      </div>
      <div class="swiper-slide">
        <div class="content-slide">  <ul class="news-list">
       <li>
       	<img src="imgs/images/nan_04.png" />
       </li>
        </ul>
        <main class="ss">
        	<dl>
        	<dt><img src="imgs/images/nan_07.png" /></dt>
        	<dd>杜蕾斯</dd>
        </dl>
        <dl>
        	<dt><img src="imgs/images/nan_10.png" /></dt>
        	<dd>4639</dd>
        </dl>
        </main>
        <main class="s">
        	<img src="imgs/images/an_03.png" />
        </main>
       
        <!--<div class="aihao">
			<ul class="twtw">
				
			</ul>
	    </div>-->
        
        </div>
      </div>
      <div class="swiper-slide">
        <div class="content-slide"> <ul class="news-list">
       <li>
       	<img src="imgs/images/nan_04.png" />
       </li>
        </ul>
        <main class="ss">
        	<dl>
        	<dt><img src="imgs/images/nan_07.png" /></dt>
        	<dd>杜蕾斯</dd>
        </dl>
        <dl>
        	<dt><img src="imgs/images/nan_10.png" /></dt>
        	<dd>4639</dd>
        </dl>
        </main>
        <main class="s">
        	<img src="imgs/images/an_03.png" />
        </main>
       
        <!--<div class="aihao">
			<ul class="twtw">
				
			</ul>
	    </div>-->
        
        </div>
      </div>
    </div>
  </div>
  
		
		<!--<section class="one">
			<img src="img/images/kuku_03.png"/>
			<span><button>进入卖场</button></span>
		</section>-->
		
		<div class="aihao">
			<ul class="twtw">
				
			</ul>
	    </div>
		
		
		<script type="text/html" id="list">
			{{each list as v i}}
					<li>
						<img src="{{v.imgs}}"/>
						<p>{{v.font}}</p>
					</li>
			{{/each}}
		</script>

		<script>
			

            var _url = "json/shiwu.json";
            $.get(_url,function(res){
				console.log(res)
				var str = '';
				 var str = template("list", {list:res});	 
				 console.log(str);
				$('.twtw').html(str);
			});
         })
		</script>
  
  
  
  <footer class="cai">
  	<dl class="dl-1">
				<dt><img src="imgs/images/da_44.png"/></dt>
				<dd>首页</dd>
			</dl>
			<dl class="dl-2">
				<dt><img src="imgs/images/da_46.png"</dt>
				<dd>单品</dd>
			</dl>
			<dl class="dl-3">
				<dt><img src="imgs/images/shi_33.png"/></dt>
				<dd>搭配</dd>
			</dl>
			<dl class="dl-4">
				<dt><img src="imgs/images/suai.png"/></dt>
				<dd>帅吧</dd>
			</dl>
			<dl class="dl-5">
				<dt><img src="imgs/images/da_52.png"/></dt>
				<dd>我的</dd>
			</dl>
  </footer>
  
  
  
  
  

<script type="text/javascript">
window.onload = function() {
//var mySwiper1 = new Swiper('#header',{
//	  freeMode : true,
//	  slidesPerView : 'auto',
//	  freeModeSticky : true ,
//});
//var mySwiper2 = new Swiper('#banner',{
//	  autoplay:5000,
//	  visibilityFullFit : true,
//	  loop:true,
//	  pagination : '.pagination',
//});
//
  var tabsSwiper = new Swiper('#tabs-container',{
    speed:500,
    onSlideChangeStart: function(){
      $(".tabs .active").removeClass('active')
      $(".tabs a").eq(tabsSwiper.activeIndex).addClass('active')  
    }
  })
  $(".tabs a").on('touchstart mousedown',function(e){
    e.preventDefault()
    $(".tabs .active").removeClass('active')
    $(this).addClass('active')
    tabsSwiper.slideTo( $(this).index() )
  })
  $(".tabs a").click(function(e){
    e.preventDefault()
  })
  
}

var mySwiper = new Swiper ('.a', {
		  	autoplay:2000,
		  	keyboardControl:true,
		    loop: true,
		    paginationClickale:true,
		    nextButton: '.swiper-button-next',
		    prevButton: '.swiper-button-prev',
		  })   
</script>

		
		
		
		
		
		
		
		
		
		
		
		
	</body>
</html>
